<template>
	<view class="notify u-skeleton">
		<u-skeleton :loading="loading" :animation="true" elColor="#FFF" bgColor="#EEE"></u-skeleton>
		<view class="u-font-lg u-main-color u-skeleton-rect">{{ data.name }}</view>
		<u-line></u-line>
		<view class="u-font-xs u-tips-color u-skeleton-rect u-m-t-10">发布时间：{{ data.create_at }}</view>
		<view class="u-font-md u-content-color u-skeleton-rect u-m-t-10 notify-text">
			<u-parse :tagStyle="parseStyle" :lazyLoad="true" :showWithAnimation="true" :html="data.content"></u-parse>
			<view class="u-p-20"></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			data: {
				name: '标题',
				date: '发布时间',
				content: '通知内容'
			},
			loading: true,
			parseStyle: {
				img: 'width:100%;height:auto;line-height:1em;vertical-align:middle'
			}
		};
	},
	onLoad(opt) {
		this.$u.login.init();
		this.loadNotify(opt.id);
	},
	methods: {
		loadNotify(id) {
			this.$u.get('data/api.data/getNotify', { id: id }).then(ret => {
				if (ret.code > 0 && ret.data.list.length > 0) {
					this.loading = false;
					this.data = ret.data.list[0];
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: $u-bg-main;
	.notify {
		padding: 20rpx 30rpx;
		min-height: 100vh;
		line-height: 2em;
		background-color: $u-bg-main;
		&-text {
			height: 80vh;
		}
	}
}
</style>
